<!-- 普通模式演示(vue) -->
<template>
	<view class="">
		<z-paging ref="paging" v-model="data.dataList" @query="queryList">
			<template #top>
				<view class="top-nav">
					<view class="nav-item " @click="hanleTab(1)" :class="{active:data.tabIndex==1}">个人</view>
					<view class="nav-item" @click="hanleTab(2)" :class="{active:data.tabIndex==2}">企业</view>
				</view>
				<u-line></u-line>
				<view class="bg-color addBtn">
					<u-search :placeholder="data.tabIndex==1?'搜索个人名称':'搜索企业名称'" v-model="data.keyword" shape="square"
						@search="search" @clear="clear" :showAction="false" margin="20rpx" height="80rpx"
						placeholderColor="rgba(0,0,0,0.4)" style="flex: initial;"></u-search>
					<u-button text="添加" @click="signShow" type="primary"></u-button>
				</view>
			</template>
			<view class="p-32">
				<view class="bg-color list-item" v-for="(item,index) in data.dataList" :key="index">
					<view v-if="data.tabIndex == 2">
						<text class="label">企业名称：</text>
						<text class="title">{{ item.company_name }}</text>
					</view>
					<view>
						<text class="label">姓名：</text>
						<text class="title">{{ item.name }}</text>
					</view>
					<view class="">
						<text class="label">手机号码：</text>
						<text class="title">{{ item.cellphone_secret }}</text>
					</view>
					<view class="icon-right delete_but" @click="deleteItem(index,item)">删除</view>
				</view>
			</view>
		</z-paging>
		<!--    <view @click="hanleAdd" class="Add">新建<br/>信息</view>-->
		<u-modal :show="show" title="添加签署方" confirmText="添加" cancelText="取消" :showCancelButton="true"
			@cancel="show = false" @confirm="addSign">
			<u--form labelPosition="left" :model="addInfo" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item label="企业名称:" prop="company_name" :required="true" v-if="data.tabIndex == 2">
					<u--input v-model="addInfo.company_name" placeholder="请输入企业名称"></u--input>
				</u-form-item>
				<u-form-item label="姓名：" prop="name" :required="true">
					<u--input v-model="addInfo.name" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号：" prop="cellphone" :required="true">
					<u--input v-model="addInfo.cellphone" maxlength='11' placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="身份证号：" prop="id_card" :required="true">
					<u--input v-model="addInfo.id_card" placeholder="请输入身份证号"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		signerDestroy,
		signerList,
		addMemberSigner,
		addUserSigner
	} from "../../../api/module/contract";
	const paging = ref(null);
	const show = ref(false);
	const uForm = ref();
	const addInfo = ref({
		cellphone: '',
		name: '',
		company_name: '',
		id_card: ''
	});
	const rules = ref({
		'company_name': {
			type: 'string',
			required: true,
			message: '请填写企业名称',
			trigger: ['blur', 'change']
		},
		'name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		'cellphone': {
			type: 'string',
			required: true,
			message: '请填写手机号',
			trigger: ['blur', 'change']
		},
		'id_card': {
			type: 'string',
			required: true,
			message: '请填写身份证号',
			trigger: ['blur', 'change']
		},
	});
	const data = reactive({
		tabIndex: 1,
		dataList: [],
		signer_user_type: 'member',
		userType: {
			1: 'member',
			2: 'user',
		},
		keyword: '',
	});
	const signShow = () => {
		addInfo.value = {
			cellphone: '',
			name: '',
			company_name: '',
			id_card: ''
		}
		show.value = true;
	}
	const addSign = () => {
		uForm.value.validate().then(res => {
			if (data.tabIndex == 1) {
				addInfo.value.signer_user_type = 'member';
				addMemberSigner(addInfo.value).then(res => {
					show.value = false;
					paging.value.reload();
				})
			} else {
				addInfo.value.signer_user_type = 'user';
				addUserSigner(addInfo.value).then(res => {
					show.value = false;
					paging.value.reload();
				})
			}
		}).catch(errors => {})
	}
	const hanleTab = (index) => {
		data.tabIndex = index;
		data.signer_user_type = data.userType[index];
		paging.value.reload();
	}
	const search = () => {
		paging.value.reload();
	}
	const clear = () => {
		data.keyword = ''
		paging.value.reload();
	}
	const queryList = (pageNo, pageSize) => {
		signerList({
			page: pageNo,
			limit: pageSize,
			name: data.keyword,
			signer_user_type: data.signer_user_type,
		}).then(res => {
			paging.value.complete(res.data);
		})
	}
	const deleteItem = (index, item) => {
		uni.showModal({
			title: '删除签署人',
			content: '确定要删除签署人吗？',
			success: (res) => {
				if (res.confirm) {
					signerDestroy({
						id: item.id
					}).then(res => {
						// 执行删除操作，可以根据索引或唯一标识符删除对应的数据项
						data.dataList.splice(index, 1);
						// 调用 z-paging 的 complete 方法更新列表
						// paging.value.complete(data.dataList);
					});
				}
			}
		});
	}
</script>
<style scoped lang="scss" src="/static/css/contract/signed.scss"></style>